import QtQuick 2.15

Item {
    id: root

    property real minValue: 0
    property real maxValue: 100
    property real value: 50
    property string title: ""
    property string unit: ""
    property string icon: ""
    property bool warningZone: false
    property real warningThreshold: 80
    property bool warningLow: false // 低于阈值警告（如燃油）
    property int numTicks: 5 // 刻度数量

    // 外部容器
    Rectangle {
        id: background
        anchors.fill: parent
        color: "#000000"
        radius: width / 2
        
        // 顶部信息区（红色区域）
        Rectangle {
            id: headerArea
            anchors.top: parent.top
            anchors.horizontalCenter: parent.horizontalCenter
            width: parent.width
            height: parent.height * 0.2
            radius: width / 2
            color: "#220000"
            
            // 确保底部不是圆角
            Rectangle {
                anchors.bottom: parent.bottom
                anchors.horizontalCenter: parent.horizontalCenter
                width: parent.width
                height: parent.height / 2
                color: parent.color
            }
            
            // 标题和图标
            Column {
                anchors.centerIn: parent
                spacing: 2
                
                Item {
                    anchors.horizontalCenter: parent.horizontalCenter
                    width: 16
                    height: 16
                    visible: root.icon !== ""
                    
                    // 水温图标
                    Image {
                        anchors.fill: parent
                        source: "qrc:/images/水温.svg"
                        fillMode: Image.PreserveAspectFit
                        visible: root.icon === "🌡️"
                    }
                    
                    // 燃油图标
                    Image {
                        anchors.fill: parent
                        source: "qrc:/images/燃油灯.svg"
                        fillMode: Image.PreserveAspectFit
                        visible: root.icon === "⛽"
                    }
                    
                    // 默认文本（如果上面的图标都不匹配）
                    Text {
                        anchors.centerIn: parent
                        text: root.icon
                        color: "#ff0000"
                        font.pixelSize: 14
                        visible: root.icon !== "🌡️" && root.icon !== "⛽"
                    }
                }
                
                Text {
                    anchors.horizontalCenter: parent.horizontalCenter
                    text: root.title
                    color: "#ff0000"
                    font.pixelSize: 11
                    font.bold: true
                }
            }
        }
        
        // 主显示区域
        Rectangle {
            id: mainArea
            anchors.top: headerArea.bottom
            anchors.bottom: footerArea.top
            anchors.horizontalCenter: parent.horizontalCenter
            width: parent.width - 4
            color: "transparent"
            
            // 刻度线和标签
            Item {
                id: ticks
                anchors.fill: parent
                anchors.topMargin: parent.height * 0.05
                anchors.bottomMargin: parent.height * 0.05
                
                Repeater {
                    model: root.numTicks
                    
                    Item {
                        width: parent.width
                        y: parent.height * (1 - index / (root.numTicks - 1))
                        
                        // 刻度线
                        Rectangle {
                            width: parent.width * 0.6
                            height: 1
                            anchors.horizontalCenter: parent.horizontalCenter
                            color: "#555555"
                        }
                        
                        // 刻度标签
                        Text {
                            anchors.right: parent.left
                            anchors.rightMargin: 2
                            anchors.verticalCenter: parent.verticalCenter
                            horizontalAlignment: Text.AlignRight
                            text: Math.round(root.minValue + (root.maxValue - root.minValue) * index / (root.numTicks - 1)).toString()
                            color: "#ffffff"
                            font.pixelSize: 8
                        }
                    }
                }
            }
            
            // 液位指示条
            Rectangle {
                id: liquidIndicator
                anchors.bottom: parent.bottom
                anchors.bottomMargin: parent.height * 0.05
                anchors.horizontalCenter: parent.horizontalCenter
                width: parent.width * 0.3
                height: (root.value - root.minValue) / (root.maxValue - root.minValue) * parent.height * 0.9
                color: {
                    if (root.warningZone) {
                        if (root.warningLow && root.value < root.warningThreshold) {
                            return "#ff0000"
                        } else if (!root.warningLow && root.value > root.warningThreshold) {
                            return "#ff0000"
                        }
                    }
                    return "#ffffff"
                }
            }
            
            // 警告线
            Rectangle {
                visible: root.warningZone
                anchors.horizontalCenter: parent.horizontalCenter
                width: parent.width * 0.6
                height: 1
                color: "#ff0000"
                y: root.warningLow 
                   ? parent.height * (1 - 0.05) - (root.warningThreshold - root.minValue) / (root.maxValue - root.minValue) * parent.height * 0.9
                   : parent.height * (1 - 0.05) - (root.warningThreshold - root.minValue) / (root.maxValue - root.minValue) * parent.height * 0.9
            }
        }
        
        // 底部数值显示区域
        Rectangle {
            id: footerArea
            anchors.bottom: parent.bottom
            anchors.horizontalCenter: parent.horizontalCenter
            width: parent.width
            height: parent.height * 0.15
            radius: width / 2
            color: "#000000"
            
            // 确保顶部不是圆角
            Rectangle {
                anchors.top: parent.top
                anchors.horizontalCenter: parent.horizontalCenter
                width: parent.width
                height: parent.height / 2
                color: parent.color
            }
            
            // 数值显示
            Row {
                anchors.centerIn: parent
                spacing: 1
                
                Text {
                    text: Math.round(root.value).toString()
                    color: "#ffffff"
                    font.pixelSize: 12
                }
                
                Text {
                    text: root.unit
                    color: "#ffffff"
                    font.pixelSize: 10
                    anchors.bottom: parent.bottom
                }
            }
        }
    }
}
